<!--
  * 时间：2024/11/14
  * 作者：刘岩
  * 描述：业绩展示
-->
<template>
  <div class="performance">
    <banner></banner>
    <div class="container">
      <div class="title">
        <h3>
          <span>展馆安防</span>
        </h3>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in list1"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div class="title">
        <h3>
          <span>智慧导览</span>
        </h3>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in list2"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
export default {
  name: "Performance",
  data () {
    return {
      list1: ['中国第一历史档案馆', '中国考古博物馆', '上海西岸美术馆', '嘉德艺术中心', '故宫博物院', '汝州青瓷博物馆', '国家大剧院', '南京德基广场美术馆',
        '天津国家海洋博物馆', '北京颐和园', '国家图书馆', '中国园林博物馆', '北京太庙劳动文化宫', '北京恭王府'],
      list2: ['山西大同市博物馆', '内蒙古自然馆', '重庆沙坪坝博物馆', '西湖博物馆总馆', '山东劳模教育基地', '德州市博物馆', '阳泉市规划展示馆', '九江规划馆', '菏泽纪检委展厅', '上海长三角展示中心',
        '隆基智慧绿能展览馆', '中国林草博物馆', '青岛海军博物馆', '北京京东方展示馆', '乌鲁木齐市博物馆', '博州博物馆', '北京工业互联网展厅', '郓城博物馆', '鹿邑党史教育馆', '乐清民俗馆',
        '钱学森学校纪念馆', '承德市博物馆', '武汉中组部旧址', '新疆尉犁县博物馆', '内蒙古展览馆', '梁山博物馆', '大连高新区展示馆', '秦始皇帝陵铜车马博物馆', '绵阳市创新馆', '新疆伊犁州博物馆',
        '图木舒克规划馆', '中国淮扬菜博物馆', '海信中央空调展厅', '新疆359旅屯垦纪念馆', '扬州经开区展示馆']
    }
  }
}
</script>

<style scoped lang="less">
.performance {
  width: 100%;
  .container {
    width: 100%;
    background: #282828;
    padding: 0 0 20px 0;
    .title {
      padding: 40px 0 30px 0;
      h3 {
        margin: 0;
        font-size: 26px;
        color: #d3b167;
        font-weight: bold;
        line-height: 37px;
        position: relative;

        span {
          position: relative;
        }

        span::before {
          content: url('@/assets/home/line-left.png');
          position: absolute;
          left: -120px;
          top: 0;
        }

        span::after {
          content: url('@/assets/home/line-right.png');
          position: absolute;
          right: -120px;
          top: 0;
        }
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      width: 1300px;
      margin: 0 auto;
      div {
        width: 240px;
        height: 50px;
        margin: 0 20px 20px 0;
        background: #333333;
        color: #ffffff;
        line-height: 50px;
        text-align: center;
        &:nth-child(2n) {
          background: #4d4d4d;
        }
        &:hover {
          background: #b99340;
        }
      }
    }
  }
}
</style>
